<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../../Templates/SubFolderTemplate.xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="head-title">
        <title>View Contact List | Merlion's ERP System</title>
    </ui:define>
    
    <ui:define name="content">
        <f:view beforePhase="#{viewContactListManagerBean.initView(event)}">
        <h:form prependId="false">
            <p:dataTable var="employee" value="#{viewContactListManagerBean.retrieveContactList()}" 
                         dynamic="true" paginator="true" rows="5" emptyMessage="No employee found in database." selection="#{viewContactListManagerBean.selectedEmployee}"> 
            
                    <p:column selectionMode="single" />

                    <p:column sortBy="#{employee.employeeName}" filterBy="#{employee.employeeName}"> 
                        <f:facet name="header"> 
                            <h:outputText value="Name" /> 
                        </f:facet> 
                        <h:outputText value="#{employee.employeeName}" /> 
                    </p:column> 
                    
                    <p:column sortBy="#{employee.position}" filterBy="#{employee.position}"> 
                        <f:facet name="header"> 
                            <h:outputText value="Position" /> 
                        </f:facet> 
                        <h:outputText value="#{employee.position.description}" /> 
                    </p:column>
                    
                    <p:column sortBy="#{employee.employeeAddress}" filterBy="#{employee.employeeAddress}"> 
                        <f:facet name="header"> 
                            <h:outputText value="Address" /> 
                        </f:facet> 
                        <h:outputText value="#{employee.employeeAddress}" /> 
                    </p:column>
                    
                    <p:column sortBy="#{employee.employeeContactNumber}" filterBy="#{employee.employeeContactNumber}"> 
                        <f:facet name="header"> 
                            <h:outputText value="Contact Number" /> 
                        </f:facet> 
                        <h:outputText value="#{employee.employeeContactNumber}" /> 
                    </p:column>         

                    <p:column sortBy="#{employee.employeeEmail}" filterBy="#{employee.employeeEmail}"> 
                        <f:facet name="header"> 
                            <h:outputText value="Email" /> 
                        </f:facet> 
                        <h:outputText value="#{employee.employeeEmail}" /> 
                    </p:column>                       
                    <f:facet name="footer">    
                        <p:commandButton id="btn" value="Remove From Contact" update="panel" actionListener="#{viewContactListManagerBean.removeContactList}" ajax="true" />
                    </f:facet>
        </p:dataTable>
        
        <p:panel id="panel"> 
                <p:ajaxStatus style="width:16px;height:16px;">   
                    <f:facet name="start">   
                        <p:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" /> 
                    </f:facet> 
 
                    <f:facet name="complete">   
                        <h:outputText value="" />   
                    </f:facet>   
                </p:ajaxStatus> 
 
                <p:messages />      
        </p:panel>    
        </h:form>
        </f:view>    
    </ui:define>

</ui:composition>
